<template>
 <div class="container">
    <div class="header">
        <van-icon @click="goBack" name="arrow-left" class="header-left" size = "30"/>
        填写订单服务
    </div>
    <status-bar item="0"/>

    <van-cell class="cell">
        <template #title>
             <van-image width = "25" height="25" :src="createInfo.service.serviceImg" />
             <span class="server-name">{{ createInfo.service.serviceName }}</span>
        </template>
        <template #default>
             <div class="service-text">
                服务内容
             </div>
        </template>
    </van-cell>
     <van-cell-group class="cell">
          <van-cell >
            <template #title>
                就诊医院
            </template>
        <template #default>
             <div @click="showHospital=true" >
                {{ form.hospital_name || '请选择就诊医院' }}
                <van-icon name ="arrow" />
             </div>
        </template>

          </van-cell>


           <van-cell >
            <template #title>
                就诊时间
            </template>
        <template #default>
             <div @click="showStartTime=true">
                {{ currentDate|| '请选择就诊时间' }}
                <van-icon name ="arrow" />
             </div>
        </template>

          </van-cell>


          <van-cell >
            <template #title>
                陪诊师
            </template>
        <template #default>
             <div @click="showComponion=true">
                {{  componionName || '请选择陪诊师' }}
                <van-icon name ="arrow" />
             </div>
        </template>
          </van-cell>


          <van-cell >
            <template #title>
                接送地址
            </template>
        <template #default>
          <van-field
            class="text"
            input-align="right"
            v-model="form.receiveAddress"
            placeholder="请输入接送地址"
          />   
        </template>
          </van-cell>


          <van-cell >
            <template #title>
                联系电话
            </template>
        <template #default>
          <van-field
            class="text"
            input-align="right"
            v-model="form.tel"
            placeholder="请填写联系电话"
          />   
        </template>
          </van-cell>
        </van-cell-group >
 

          <!-- 服务需求 -->
         
        <van-cell-group class="cell" title="服务需求">
            <van-field
            class="text"
            style="height: 100px;"
            v-model="form.demand"
            placeholder="请简单描述您要就诊的科室"
          />   

        </van-cell-group>
        <van-button type="primary" class="sumbit" @click="submit" size="large">提交订单</van-button>

          <van-popup    
          v-model:show = "showHospital"
            position = "bottom"
            :style="{height:'30%'}"
          > 
          <van-picker
          :columns="showHospColumns"
          @confirm="showHospConfirm"
          @cancel="showHospital=false"
         
        />
 
        </van-popup>

        <van-popup    
          v-model:show = "showStartTime"
            position = "bottom"
            :style="{height:'30%'}"
          > 
          <van-date-picker

            @confirm="showTimeConfirm"
          @cancel="showHospital=false"
            
            title="选择日期"
            :min-date="minDate"
            :max-date="maxDate"
          />

 
        </van-popup>


        <van-popup    
          v-model:show = "showComponion"
            position = "bottom"
            :style="{height:'30%'}"
          > 
            <van-picker
          :columns="componionColumns"
          @confirm="showComponionConfirm"
          @cancel="showComponion=false"
         
        />
        </van-popup>
        <van-dialog :show-confirm-button= "false" v-model:show="showCode">
          
             <van-icon name = "cross" class="close" @click="closeCode" />
             <div>微信支付</div>
          <van-image width = "150" height="150" :src = "codeImg"/>
          <div>请使用微信扫一扫二维码付款</div> 
        </van-dialog>

             
          

 </div>
</template>

<script setup>
import { onMounted ,getCurrentInstance,reactive,ref,computed} from 'vue'
import { useRouter } from 'vue-router'
import statusBar from '../../components/statusBar.vue'
import Qrcode from 'qrcode'



const router = useRouter()

const { proxy } = getCurrentInstance()

const createInfo = reactive({
  
    companion:[],
    hospitals:[],
    service:{}

})
onMounted(async () => {
   const {data} = await proxy.$api.h5Companion()
   Object.assign(createInfo,data.data)
   console.log(createInfo)

})
const goBack = () => {
    router.go(-1)
}

const form = reactive({})

const showHospital = ref(false)

const showHospColumns = computed(() => {
      return  createInfo.hospitals.map(item =>{
           return{ text:item.name, value :item.id}
         })
})

//医院选择
const showHospConfirm = (item) =>{
     
    form.hospital_id = item.selectedOptions[0].value
    form.hospital_name = item.selectedOptions[0].text
    showHospital.value = false
}

//开始时间选择
const showStartTime = ref(false)
const currentDate = ref()
const minDate = ref(new Date())

const showTimeConfirm = (item) =>{
  const dateStr = item.selectedValues.join('-')
  currentDate.value =dateStr
  form.starttime = new Date(dateStr).getTime()
  showStartTime.value =false
}

//陪诊师
const componionName = ref()
const showComponion = ref(false)
const componionColumns = computed(() => {
      return  createInfo.companion.map(item =>{
           return{ text:item.name, value :item.id}
         })
})


const showComponionConfirm = (item) => {

  form.companion_id = item.selectedOptions[0].value
  componionName.value = item.selectedOptions[0].text
  showComponion.value =false

}

//支付
const showCode = ref(false)
const  codeImg = ref('')
const closeCode = () => {
    showCode.value = false
    router.push('/order')
}

const submit = async () => {
   const params=[
    'hospital_id',
    'hospital_name',
    'demand',
    'companion_id',
    'receiveAddress',
    'tel',
    'starttime'
   ]
   for(const i of params){
    if(!form[i]){
       showNotify({})
    }
   }
   const{data:orderRes} = await proxy.$api.createOrder(form)
   console.log(orderRes.data.wx_code)
   Qrcode.toDataURL(orderRes.data.wx_code).then((url) =>{
    showCode.value = true
    codeImg.value = url
   })
}


</script>

<style  lang="less" scoped>

.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
    align-items:center ;
	display: flex;
	align-items: center;
  }
  .server-name {
	  margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}

</style>